<template>
  <div class="loader" v-show="props.loaderShow"></div>
</template>

<script setup lang="ts">
interface IUILoadBarConfig {
  loaderShow: boolean
}

const props = withDefaults(defineProps<IUILoadBarConfig>(), {
  loaderShow: false
})
</script>

<style lang="less" scoped>
// 加载动画start
.loader {
  --height-of-loader: 4px;
  --loader-color: #0071e2;
  width: 60%;
  height: var(--height-of-loader);
  border-radius: 30px;
  background-color: rgba(0, 0, 0, 0.2);
  position: relative;
  margin: 0 auto;
}

.loader::before {
  content: "";
  position: absolute;
  background: var(--loader-color);
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  border-radius: 30px;
  animation: moving 1s ease-in-out infinite;
}

@keyframes moving {
  50% {
    width: 100%;
  }

  100% {
    width: 0;
    right: 0;
    left: unset;
  }
}
// 加载动画end
</style>
